import React,{useState,useEffect} from 'react';
import headStyle from './Header.module.css';

import {Row,Col,Menu} from 'antd';
import {HomeOutlined,SmileOutlined,MenuOutlined,CustomerServiceOutlined} from "@ant-design/icons";
import Link from 'next/link';
import axios from 'axios';

import { navListConfig} from '../../config/appConfig';



function Header() {

    

    


    return (
        <div className={headStyle.header}> 

            <Row type="flex" justify="center">
                <Col xs={20} sm={20} md={10} lg={10} xl={10} xxl={6}>
                    <Link href="/"><a>
                        <div className={headStyle.header_logocontainer}>
                            <div className={headStyle.header_logoimg} >火锅国大侠</div>
                            <div className={headStyle.header_logotext} >分享技术</div>
                        </div>
                    </a></Link>    
                </Col>
                <Col className={headStyle.header_dropdownmenu} xs={4} sm={4} md={0} lg={0} xl={0} >
                    <MenuOutlined/>
                </Col>

                <Col className={headStyle.header_menu} xs={0} sm={0} md={14} lg={8} xl={6} xxl={6}>

                    <Menu mode="horizontal" >

                        {navListConfig.map( item => {

                            return (

                                <Menu.Item key={item.id} icon={item.icon} className="header_menuitem">
                                    <Link href={item.url}><a>{item.title}</a></Link>
                                </Menu.Item>
                            )
                            
                        })}

                    </Menu>
                </Col>
            </Row>

        </div>
    )
}


export default Header;